<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.ok{
			    color:green;
			}
			.error{
			    color:red;
			}
		</style>
		
		<!-- 
一。前台验证格式
		1.console.log("checkName")；；测试----console 执行了checkName方法就打印一下
		2.var name = $("#name").val(); 变量name = 获取id=name元素里面的值(name框里面输入的值)
		3.判断输入name的格式正不正确，，，（前台操作）
			3.1正则表达式 var reg = /^[a-zA-Z0-9_]{5,9}$/;
			3.2 做判断 if(name.match(reg))，，name属不属于reg的范围，，match在不在这个范围里
		4.正确（name在正则表达式范围里面）；$("#nameMsg").attr("class", "ok"); 文本框输入的字 执行css的class选择器的ok
		5.错误（name不在范围里面）； $("#nameMsg").attr("class", "error"); return；文本框输入的字  执行css的class选择器的erro，不往下走了(停在那，不往下执行servlet)
		
2。后台 (前台通过,才能执行，，，把 输入的name 传到后台数据库比对)
	1.访问Servlet   ；；；  "${pageContext.request.contextPath}/student?method=checkName",
	2.传到Servlet的data（"name": name ）    ,在这里name 在function刚执行的时候就获取了(var name = $("#name").val();)，就是姓名框  你输入的
	3.后台返回data（"isExist": isExist [true/false] ）
	4. isExist判断
		true:说明数据库 name里面 有重名的  不能注册，$("#nameExistMsg").html("；数据库里面查询到名字一样的了，该用户名已经存在"); $("#nameExistMsg").css("color", "red");
		false: 说明数据库 里 没有重名的  可以注册 $("#nameExistMsg").html("；数极库里没有找到名字一样的，该用户名可以使用");$("#nameExistMsg").css("color", "green");
		 -->
		 

		<script src="js/jquery.min.js"></script>
		<script type="text/javascript">
			function checkName() {
				console.log("checkName")
				var name = $("#name").val();
				
				// 通过正则表达式验证格式是不是合法，在前端就可以完成
				var reg = /^[a-zA-Z0-9_]{5,9}$/;
				
				if(name.match(reg)) {
					/* class="ok" */
					$("#nameMsg").attr("class", "ok"); //获取属性(属性名：class，属性值：ok)
					// 如果想加多个使用addClass
					//$("#nameMsg").addClass("ok");
				} else {
					$("#nameMsg").attr("class", "error");
					// 格式不合法就不需要发送到后台
					return;
				}
				
				// 如果格式合法，通过ajax发送到后台验证数据库里面是不是有重名的名字
				$.post(
					"${pageContext.request.contextPath}/student?method=checkName",
					{"name" : name},
					function(data) {
						//{"isExist": isExist}
						console.log(data);
						if(data.isExist) {// true代表这个用户已经存在
							$("#nameExistMsg").html("；数据库里面查询到名字一样的了，该用户名已经存在");
							$("#nameExistMsg").css("color", "red");
						} else {
							$("#nameExistMsg").html("；数极库里没有找到名字一样的，该用户名可以使用");
							$("#nameExistMsg").css("color", "green");
						}
					},
					"json"
				);
			}
 <!-- 
 3.验证邮箱： 前台
	 			1.控制台打印 测试   调用了 checkEmail function
	 			2.获取email输入框里的值(email 在html已经添加了焦点事件)
	 			3.email比较reg正则表达式输入范围
	 				3.1在这个里面  ，，("#emailSpan").hide();消失，(因为用户输入对了，不用提示他 格式了，所有提示格式消失就行)
	 							("#emailMsg").html("邮箱符合格式").css("color","green");追加 显示 “邮箱符合格式（绿色）”
	 				3.2不在  ，，("#emailSpan").attr("class", "error");变红，(因为输错了，还要提示格式，所以提示格式也变红)
	 							("#emailMsg").html("不符合格式").css("color","red");追加 显示 “邮箱符不符合格式（红色）”
 		  -->
			function checkEmail() {
				console.log("checkEmail")
				var email = $("#email").val();
				var reg = /^[a-zA-Z0-8_]{3,5}@[a-zA-Z0-8_]+\.[a-zA-Z0-8_]+$/;
				if (email.match(reg)) {
					$("#emailSpan").hide(); //格式：xxx@xxx.com (文本提示信息).小时
					$("#emailMsg").html("邮箱符合格式");
					$("#emailMsg").css("color","green");
				}else {
					$("#emailSpan").attr("class", "error");
					$("#emailMsg").html("邮箱格式错误，请重新输入");
					$("#emailMsg").css("color","red");
				}
				
		//
				/* var name = document.getElementById("email").value;
				var span = document.getElementById("emailMsg");
				// situ@qq.com
				var reg = /^[a-zA-Z0-8_]{3,5}@[a-zA-Z0-8_]+\.[a-zA-Z0-8_]+$/;
				
				if(name.match(reg)) {
					/* class="ok" */
				/* 	span.className = "ok";
				} else {
					span.className = "error";
				} */
			}
		</script>
	</head>
	<body>
	<!-- 
	1.名字文本框    添加 焦点事件，，鼠标从文本框拿开之后
		1.1提示格式是否正确，添加id
	2.emial 添加 焦点事件
	 -->
		名字：<input type="text" id="name" onblur="checkName()"/> 
		<span id="nameMsg">5-10位字母、数字、下划线</span>
		<span id="nameExistMsg"></span>
		<br/>
		邮箱：<input type="text" id="email" onblur="checkEmail()"/>
		<span id="emailSpan">格式：xxx@xxx.com</span>
		<span id="emailMsg"></span>
	</body>
</html>